<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>衣</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/guide.css">
	</head>

	<body>
		<div id="slider" class="mui-slider mui-fullscreen" style="background-color: black;">
			<div class="mui-slider-group">
				<!-- 第一张 -->
				<div class="mui-slider-item">
					<div class="item-logo" style="background-color: #fff">
						<div class="a">
							<img src="img/guide/pic.png" alt=""/>
						</div>
						<div class="animate guide-show">
							<div class="animated bounceInDown h2">
								<img src="img/guide/dapei.png">
							</div>
							<div class="animated bounceInLeft page1_word">极速搭配 人人都是搭配师</div>
							
						</div>
					</div>
				</div>
				<!-- 第二张 -->
				<div class="mui-slider-item">
					<div class="item-logo" style="background-color: #fff;">
						<div class="a">
							<img src="img/guide/pic(1).png"/>
						</div>
						<div id="tips-2" class="animate mui-hidden">
							<div class="animated bounceInLeft h2">
								<img src="img/guide/nocare.png">
							</div>
							<div class="animated bounceInRight page1_word">
								逛了N条街也买不到合适的裙子
							</div>
						</div>
					</div>
				</div>
				<!-- 第三张 -->
				<div class="mui-slider-item">
					<div class="item-logo" style="background-color: #fff;">
						<div class="a1">
							<img src="img/guide/pic(2).png" alt=""/>
						</div>
						<div id="tips-3" class="animate mui-hidden">
							<div class="animated bounceInRight h2">
								<img src="img/guide/shouce.png">
							</div>
							<div class="animated bounceInLeft page1_word">
								精心挑选搭配，绝不鼓励乱剁手
							</div>
						</div>
						<!--<div class="animate">-->
							<button id='home' class="mui-btn mui-btn-warning mui-btn-outlined">立即体验</button>
						<!--</div>-->
					</div>
				</div>
			</div>
			<div class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script>
			mui.back = function() {};
			mui.plusReady(function() {
				if(mui.os.ios){
					plus.navigator.setFullscreen(true);
				}
				plus.navigator.closeSplashscreen();
			});
			//立即体验按钮点击事件
			document.getElementById("home").addEventListener('tap', function(event) {
				var main=mui.openWindow({
					url:"index.html",
					id:"index"
					
				});
			});
			//图片切换时，触发动画
			document.querySelector('.mui-slider').addEventListener('slide', function(event) {
			 	//注意slideNumber是从0开始的；
			 	var index = event.detail.slideNumber+1;
			 	if(index==2||index==3){
			 		var item = document.getElementById("tips-"+index);
			 		if(item.classList.contains("mui-hidden")){
			 			item.classList.remove("mui-hidden");
			 			item.classList.add("guide-show");
			 		}
			 	}
			});
			
		</script>
	</body>

</html>